<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>IFE JavaScript Task 01</title>
    
        <style>
        
            ol {
                list-style: none;
            }
            
            #container {
                position: absolute;
                width: 400px;
                height: 400px;
                margin: auto;
            }
            
            .row-container {
                width: 400px;
                height: 40px;
                line-height: 40px;
                letter-spacing: -0.5em;
                padding: 0;
                margin: 0;
            }
            
            .row-container li {
                display: inline-block;
                letter-spacing: 0;
                width: 40px;
                height: 10px;
                text-align: center;
            }
            
            .col-container {
                width: 400px;
                height: 400px;
                border: 1px black solid;
                padding: 0;
                margin: 0;
            }
            
            .col-container li {
                display: flex;
                width: 400px;
                height: 40px;
                flex-flow: row wrap;
                line-height: 40px;
                background-color: #FFFFFF;
                box-sizing: border-box;
                position: relative;
                counter-increment: testname;
            }
            
            .col-container li::before {
                content: counter(testname);
                position: absolute;
                left: -40px;
                width: 40px;
                text-align: center;
            }
            
            .col-container li div {
                width: 40px;
                height: 100%;
                box-sizing: border-box;
                outline: 1px black solid;
                background-color: #FFFFFF;
            }
            
            .col-container #car {
                width: 41px;
                height: 40px;
                border-top: 10px solid blue;
                box-sizing: border-box;
                background-color: red;
                transition: all .5s;
                position: absolute;
                z-index: 10;
            }
            
            #submit {
                margin: 10px 0;
            }
            
            #command-container {
                width: 400px;
                height: 140px;
                position: relative;
            }
            
            #command-container #command-row {
                width: 20px;
                height: 140px;
                top: 0;
                overflow: hidden;
                position: absolute;
                background: #BDBDBD;
                text-align: center;
                color: #FFFFFF;
                z-index: 10;
                padding: 0;
                margin: 10px 0;
            }
            
            #command-container #commandInput {
                width: 400px;
                height: 140px;
                position: absolute;
                resize:none;
                margin: 10px 0;
                padding: 0;
                color: green;
                background: #000;
                box-sizing: border-box;
                padding-left: 20px;
                z-index: 5;
            }
            
            .col-container li .wall {
                background-color: black;
            }
        </style>
    </head>
    
    <body>
    
        <div id="container">
            <ol class="row-container">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ol>

            <ol class="col-container">
                <div id="car"></div>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>

            <button id="submit">执行</button>
            <button id="refresh">Refresh</button>
            <button id="create-wall">随机造墙</button>
            <label>开启键盘操作<input type="checkbox" id="keyboard-ctrl" checked></label>
            <div id="command-container">
                <ol id="command-row"></ol>
                <textarea id="commandInput"></textarea>
            </div>    
        </div>
        <script src="task.js"></script>
        <script src="bfs.js"></script>
    </body>
</html>    